<template>
		<div class="xe-popup xe-dialog" ref="body" v-show="isShow">
			<transition name="abc">
				<div class="xe-popup-mask" v-show="isShow"></div>
			</transition>
			<div class="xe-popup-box">
				<transition name="bounce">
					<div class="xe-popup-content" ref="content" v-show="isShow">
						<div class="xe-dialog-box">
							<div class="xe-dialog-content">
								<slot name="title"></slot>
								<slot name="text"></slot>
							</div>
							<slot name="close"></slot>
						</div>
					</div>
				</transition>
			</div>
		</div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: "Warning",
	    props:['isShow'],
	    data(){
          return {
          }
	    },
	    methods:{

	    }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
	/**/
	.abc-enter-active {
		animation: bounce-in .8s;
	}
	.abc-leave-active {
		animation: bounce-in .8s reverse;
	}
	@keyframes abc-in {
		0% {
			opacity 0
		}
		50% {
			opacity .5
		}
		100% {
			opacity 1
		}
	}
	/*内容区*/
	.bounce-enter-active {
		animation: bounce-in .8s;
	}
	.bounce-leave-active {
		animation: bounce-in .8s reverse;
	}
	@keyframes bounce-in {
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(1.1);
		}
		100% {
			transform: scale(1);
		}
	}
	/*--------------------------------------------------*/
	.xe-popup
		position: fixed;
		left: 0
		right: 0
		top: 0
		bottom: 0
		z-index 100000
	.xe-dialog
		transition all 0.5s
		text-align: center;
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
		.xe-popup-mask
			background-color: rgba(0,0,0,.3);
			z-index: 999;
			position: absolute;
			width: 100%;
			height: 100%
		.xe-popup-box
			z-index: 1000
			position: absolute
			width: 100%
			height: 100%
			.xe-popup-content
				position:absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				transition: opacity .4s
				.xe-dialog-box
					position:absolute;
					left:50%;
					top:50%;
					margin-left:-3.25rem;
					margin-top:-25%;
					width: 6.5rem;
					background: #fff;
					border-radius: .1rem;
					overflow: hidden;
					.xe-dialog-content
						padding: 0 .3rem;
						.xe-dialog-title
							text-align: center;
							margin-top: .4rem;
							line-height: 1em
							font-size: .32rem
						.xe-dialog-text
							margin: .4rem;
							line-height: 1.5em;
							color: #676767;
							font-size: .28rem
					.xe-dialog-action
						position: relative
						display: flex
						.xe-button
							color: #ff6700
							width: 100%;
							height: 1rem;
							line-height: 1rem;
							-webkit-box-flex: 1;
							-webkit-flex: 1 1 auto;
							flex: 1 1 auto;
							span
								font-size: .32rem
					.xe-dialog-action::before
						content ""
						display: block;
						position: absolute
						-webkit-transform: scale(.33333) translateZ(0);
						transform: scale(.33333) translateZ(0);
						width: 300%
						border-top: 1px solid #9C9C9C;
						left: 0;
						top: 0;
						-webkit-transform-origin: 0 top;
						transform-origin: 0 top;

</style>